<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<link rel="stylesheet" type="text/css" href="../css/zhuce.css">
<script src="../js/jquery.js"></script>
<script src="../js/cookie.tools.js"></script>
<body>
<header>
    <div class="wrap header">
        <img src="../images/zhucelogo.jpg" alt="">
    </div>

</header>
<main>
    <div class="wrap main">
        <div class="zhuce">
            <p class="p1">新用户注册</p>
            <form>
                <ul>
                    <li><input type="text" placeholder="请输入手机号码" class="inp1"></li>
                    <div class="div1"></div>
                    <li><input type="" placeholder="请输入右图验证码" class="inp2"> <span class="btn2"></span>
                        <div class="div2"></div>
                    </li>
                    <li><input type="" placeholder="输入验证码" class="inp3">
                        <button class="btn1" type="button">获取验证码</button>
                        <div class="div3"></div>
                    </li>
                    <li><input type="" placeholder="设置6-20个字符的密码" class="inp4"></li>
                    <div class="div4"></div>
                    <li><input type="checkbox" class="inp6"><span class="span1">我已同意魅力惠使用条约</span></li>
                    <li>
                        <button type="submit" class="btn3" disabled="disabled">立即注册</button>
                    </li>
                </ul>


            </form>
            <p class="last">已注册
                <a href="denglu.html">立即登录</a>
            </p>


        </div>


    </div>

</main>
</body>
<script>
    $(function(){
        function yzm(){
            return String.fromCharCode((parseInt(Math.random() * 26) + 97)) + parseInt(Math.random() * 10000)
        }

        $(window).on("load", function(){
            $(".btn2").html(yzm())
        })
        $(".inp1").on("change", function(){
            var regTel = /^[1][3456789]\d{9}$/
            if(!(regTel.test(this.value))){
                $(".div1").html("请输入格式正确的手机号")
            } else {
                $(".div1").html("")
            }
        })
        $(".inp2").on("change", function(){

            if(($(this).val() != $(".btn2").text())){
                $(".div2").html("验证码错误")
            } else {
                $(".div2").html("")
            }
        })
        $(".btn2").on("click", function(){
            $(this).html(yzm())
        })
        $(".inp3").on("change", function(){
            var reguu = /\w{4}/
            if(!(reguu.test(this.value))){
                $(".div3").html("验证码是4位数字")
            } else {
                $(".div3").html("")
            }
        })
        $(".inp4").on("change", function(){
            var regPwd = /^\w{8,16}$/;
            if(!(regPwd.test(this.value))){
                $(".div4").html("请输入格式的密码")
            } else {
                $(".div4").html("")
            }
        })
        $("input[type='checkbox']").on("click", function(){
            if($("input[type='checkbox']").prop("checked")){
                $(".btn3").prop({disabled : false})
                $(".btn3").addClass("check")
            } else {
                $(".btn3").prop({disabled : true})
                $(".btn3").removeClass("check")
            }
        })
        console.log($(".inp1").val());
        $(".btn3").on("click", function(){
            if($(".inp1").val()==""){
                $(".div1").html("请输入格式正确的手机号")

                return false
            }
            if($(".inp2").val()==""){
                $(".div2").html("验证码错误")
                return false
            }
            if($(".inp3").val()==""){
                $(".div3").html("验证码是4位数字")
                return false
            }
            if($(".inp4").val()==""){
                $(".div4").html("请输入格式的密码")
                return false
            }


            var strUserInfo=getCookieByName("userInfo2")
            var arr=JSON.parse(strUserInfo||"[]")
            var obj = {
                utel : $(".inp1").val(),
                upwd :$(".inp4").val()
            }
            arr.push(obj)
            var strobj=JSON.stringify(arr)
            setCookie("userInfo2",strobj,10)
           alert("注册成功")
           window.location="denglu.html"

            return false
        })


    })


</script>

</html>